 /* 页面整体通用样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* 页面整体容器样式 */
.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    /* 设置左右子元素等比例分配空间，实现1:1分布 */
    justify-content: space-between;
}

/* 左侧题目信息区域样式 */
.left-panel {
    width: 45%; /* 适当调整宽度占比，给边框等预留一点空间，避免因百分百宽度导致显示问题 */
    padding: 20px;
    border-right: 1px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
}

.left-panel h2 {
    margin-top: 0;
    font-size: 20px; /* 适当增大标题字体大小 */
    color: #333; /* 设置标题颜色 */
}

.left-panel p {
    margin: 10px 0;
    font-size: 16px; /* 适当设置正文文字大小 */
    line-height: 1.5; /* 增加行高，使文字排版更舒适 */
}

/* 代码编辑器样式，设置字体为微软雅黑，并增大字号 */
#editor {
    width: 100%; /* 设置宽度为100% */
    height: 100%; /* 设置高度为100% */
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 20px 0; /* 上下外边距保持一致，更规整 */
    font-family: "微软雅黑", Arial, sans-serif; /* 设置字体为微软雅黑，若系统没有该字体则使用备用字体 */
    font-size: 18px; /* 增大字号，可根据喜好调整具体数值 */
    overflow: hidden;
}


/* 新增样式，用于展示代码运行结果的区域，同样增大字号 */
.result-area {
    margin: 20px 0; /* 上下外边距保持一致，更规整 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-family: "微软雅黑", Arial, sans-serif; /* 同样设置为微软雅黑字体 */
    font-size: 18px; /* 增大字号，保持和代码编辑器字体大小一致 */
    white-space: pre-wrap;
}

/* 右侧代码编辑与运行相关区域样式，同样设置flex-grow属性使其等比例占空间 */
.right-panel {
    width: 55%; /* 调整宽度占比，和左侧配合实现空间合理分配 */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 确保右侧面板占满剩余空间 */
}

.CodeMirror {
    height: 100%;
    flex-grow: 1; /* 确保编辑器占满父容器 */
}